import React, { Component } from "react";

import classnames from 'classnames'

import "./Paging.css";

class Paging extends Component {
 
  render() {
    var num=this.props.num;
    var page=Math.ceil(parseInt(num)/4)
    var arr=this.props.arr
    var index=this.props.index

    return (
      <div className="fenye-wrap">
        <span className="prev page-item" onClick={() => this.gobefore()}>
          上一页
        </span>
        {arr.map(value => {
          var pageClass=classnames({
            'page-item':true,
            'active-fenye':value == index
          })

          return (
            <span
              className={value == index?'active-fenye page-item':'page-item'}
              id={value}
              onClick={e => this.changearr(e)}
            >
              {value}
            </span>
          );
        })}
        <span
          className="next active-fenye page-item"
          onClick={() => this.goafter()}
        >
          下一页
        </span>
      </div>
    );
  }

  goafter() {
    this.props.goafter()
  }

  gobefore() {
   this.props.gobefore()
  }
  changearr(e) {
    this.props.changearr(e)
  }
}

export default Paging;
